var myChart = echarts.init(document.getElementById('main1'));

let myChartdata=[];
// 指定图表的配置项和数据
option1 = {
    backgroundColor: '#2c343c',
    title: {
        text: 'Customized Pie',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },

    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:myChartdata.sort(function (a, b) { return a.value - b.value}),
            // data:[
            //     {value:335, name:'直接访问'},
            //     {value:310, name:'邮件营销'},
            //     {value:274, name:'联盟广告'},
            //     {value:235, name:'视频广告'},
            //     {value:400, name:'搜索引擎'}
            // ].sort(function (a, b) { return a.value - b.value}),
            roseType: 'angle',
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

var myChart2 = echarts.init(document.getElementById('main2'));

function getColor(){
    return '#'+(Math.random()*0xffffff<<0).toString(16);
}

let colorList = [];
let x_data = [];
let y_data = [];
option2 = {
    backgroundColor: '#000',
    color: colorList,
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    xAxis: [{
        type: 'category',
        data: x_data,
        axisTick: {
            show: false,
            alignWithLabel: true
        },
        axisLine: {
            lineStyle: {
                color: '#132C57'
            }
        },
        axisLabel: {
            color: '#fff'
        }
    }],
    yAxis: {
        type: 'value',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            color: '#fff'
        }
    },
    series: [{
        tooltip: {
            show: false
        },
        name: 'bg',
        type: 'pictorialBar',
        barWidth: '60%',
        silent: true,
        symbol: 'rect',
        symbolRepeat: true,
        symbolMargin: 1,
        symbolSize: [25, 4],
        itemStyle: {
            color: '#0B4B57'
        },
        data: [390, 390, 390, 390, 390, 390]
    },
        {
            type: 'pictorialBar',
            animation: true,
            animationDuration: 600,
            symbol: 'rect',
            symbolRepeat: true,
            symbolSize: [25, 4],
            symbolMargin: 1,
            barWidth: '60%',
            itemStyle: {
                normal: {
                    color: function(params) {
                        return colorList[params.dataIndex]
                    },
                    label: {
                        show: false
                    }
                }
            },
            data: y_data
        }
    ]
};